<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Hello, World</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }

    #allmap {
      width: 398px;
      height: 200px;
      margin: 0 auto;
    }
  </style>
  <!-- <script type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=zG1Usx0pD0Hk5BGyGo2nG2FrOPczc2Wd">
    </script> -->
</head>

<body>
  <div id='allmap'></div>
  <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script>
    function LoadBaiduMapScript() {
      // 
      const BMap_URL = "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=zG1Usx0pD0Hk5BGyGo2nG2FrOPczc2Wd&callback=onBMapCallback";
      return new Promise((resolve, reject) => {
        // 如果已加载BMapGL类则直接返回
        if (typeof BMapGL !== "undefined") {
          resolve(BMapGL);
          return true;
        }

        // 百度地图异步加载回调处理（将onBMapCallback定义为window方法，调用时触发成功resolve的回调）
        window.onBMapCallback = function () {
          console.log("百度地图脚本初始化成功...");
          // 调用成功的回调并传入BMapGL
          resolve(BMapGL);
        };
        
        // 插入script脚本
        let scriptNode = document.createElement("script");
        scriptNode.setAttribute("type", "text/javascript");
        scriptNode.setAttribute("src", BMap_URL);
        document.body.appendChild(scriptNode);
      });
    }

    const getMap=LoadBaiduMapScript();
    // 调用Promise的then方法并配置
    getMap.then(map=>{
      console.log(map);
      BMap(map)
    })
    // 定义配置百度地图的方法
    function BMap(map) {
      const BMapGL=map;
      var map = new BMapGL.Map("allmap");
      map.centerAndZoom(new BMapGL.Point(114.312765, 23.830371), 15); // 设置中心点坐标（经度，纬度）以及缩放级别
      map.enableScrollWheelZoom(true);

      theLocation()

      function theLocation() {
        // 用经纬度设置地图中心点
        map.clearOverlays();
        var point = new BMapGL.Point("114.312765", "23.830371");
        var marker = new BMapGL.Marker(point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        map.panTo(point);

        // 开启信息窗口
        var opts = {
          width: 200, // 信息窗口宽度
          height: 60, // 信息窗口高度 
          title: "惠州智富家具有限公司", // 信息窗口标题 
          // enableMessage : true,//设置允许信息窗发送短息 
          message: "公司" // 信息内容
        }
        var infoWindow = new BMapGL.InfoWindow("地址：惠州市惠阳区新圩镇东风村", opts); // 创建信息窗口对象 
        map.openInfoWindow(infoWindow, point); //开启信息窗口
        // marker.addEventListener("click", function(){          
        //   map.openInfoWindow(infoWindow, point); //开启信息窗口
        // }); 
      }
    }


    // setTimeout(() => {
    //   console.log('GMap', BMapGL)
    //   // var map = new BMapGL.Map("allmap");
    //   // console.log(map);
    // }, 50)



    // function addScriptTag(src) {
    //   var script = document.createElement('script');
    //   script.setAttribute("type", "text/javascript");
    //   script.src = src;
    //   document.body.appendChild(script);
    // }
    // addScriptTag("https://api.map.baidu.com/api?v=1.0&type=webgl&ak=zG1Usx0pD0Hk5BGyGo2nG2FrOPczc2Wd");
  </script>
  <script>
    // console.log('BMapGL', BMapGL)
    // 百度地图API功能
    // function BMap() {
    //   var map = new BMapGL.Map("allmap");
    //   map.centerAndZoom(new BMapGL.Point(114.312765, 23.830371), 15); // 设置中心点坐标（经度，纬度）以及缩放级别
    //   map.enableScrollWheelZoom(true);

    //   theLocation()

    //   function theLocation() {
    //     // 用经纬度设置地图中心点
    //     map.clearOverlays();
    //     var point = new BMapGL.Point("114.312765", "23.830371");
    //     var marker = new BMapGL.Marker(point);  // 创建标注
    //     map.addOverlay(marker);              // 将标注添加到地图中
    //     map.panTo(point);

    //     // 开启信息窗口
    //     var opts = {
    //       width: 200, // 信息窗口宽度
    //       height: 60, // 信息窗口高度 
    //       title: "惠州智富家具有限公司", // 信息窗口标题 
    //       // enableMessage : true,//设置允许信息窗发送短息 
    //       message: "公司" // 信息内容
    //     }
    //     var infoWindow = new BMapGL.InfoWindow("地址：惠州市惠阳区新圩镇东风村", opts); // 创建信息窗口对象 
    //     map.openInfoWindow(infoWindow, point); //开启信息窗口
    //     // marker.addEventListener("click", function(){          
    //     //   map.openInfoWindow(infoWindow, point); //开启信息窗口
    //     // }); 
    //   }
    // }

    // BMap()
    // setTimeout(()=>{},1000)
    // window.onload = function () {
    //   addScriptTag("https://api.map.baidu.com/api?v=1.0&type=webgl&ak=zG1Usx0pD0Hk5BGyGo2nG2FrOPczc2Wd");
    // }
  </script>
</body>

</html>